<template>
	<view style="height: 100vh; display: flex;align-items: center;justify-content: center;background-image: url('/static/picture/login.png');background-size: 100% 100%;" >
		<view class="auth">
			<view class="wanl-title">欢迎登陆小凡CRM</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input 
						type="text"
						placeholder="账号" 
						confirm-type="next" 
						maxlength="16"
						placeholder-class="placeholder" 
						name="account"
						:value="account"
					></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input 
						type="text"
						placeholder="密码" 
						password="true" 
						confirm-type="done"
						maxlength="16"
						placeholder-class="placeholder" 
						name="password"
						@input="onKeyInput"
					></input>
				</view>
				
				<view class="auth-button flex flex-direction">
					<button style="background-color: rgb(255, 255, 255,0);color: rgb(255, 255, 255);border: 1px solid;" form-type="submit" :disabled="submitDisabled">登 陆</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			submitDisabled: true,
			account: '',
			pageroute: ''
		};
	},
	onLoad(){
		let userInfo = uni.getStorageSync('userInfo')
		if(userInfo.id){
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	},
	methods: {
		onKeyInput: function(e) {
			this.submitDisabled = false
		},
		formSubmit: function(e) {
			//定义表单规则
			var rule = [
				{ name: 'account', checkType: 'notnull', errorMsg: '請輸入用戶名' },
				{ name: 'password', checkType: 'string', checkRule: '6,16', errorMsg: '密碼至少6位' }
			];
			//进行表单检查
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				
				this.$api.user.login(formData).then(res =>{
					console.log(res)
					uni.setStorageSync("userInfo",res.data.data)
					uni.showToast({
						title:'登陆成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}).catch(err=>{
					console.log(err)
					uni.showToast({
						title:err.data.msg,
						icon:'none'
					})
				})
				
			} else {
				uni.showToast({
					title:graceChecker.error,
					icon:'none'
				})
			}
		},
		
	}
};
</script>

<style scoped lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.wanl-title {
		color: #fff;
		padding-bottom: 130rpx;
		// padding-top: 170rpx;
		font-size: 55rpx;
	}
	.wanl-title .titleInfo{
		font-size: 56rpx;
	}
	
	.wanl-weixin-btn-info{
		color: #B8B8B8 !important;
	}
	
	
	.auth {
		// margin: 0 60rpx;
	}
	
	.auth-group {
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 90rpx;
		justify-content: space-between;
		margin-bottom: 25rpx;
		background: #efefef;
		border-radius: 4px;
	}
	
	.auth-group input {
		flex: 1;
		font-size: 33upx;
		color: #250f00;
		padding-right: 20upx;
	}
	
	.auth-group .placeholder {
		color: #b3b3b3;
	}
	
	.auth-button{
		padding: 25rpx 0 50rpx 0;
	}
	
	.auth-button .cu-btn{
		height: 90rpx;
	}
	 
	.text-center{
		color: #3f2f21 ;
	}
	
	.auth-clause{
		font-size: 25rpx;
		color: #909090;
	}
	.auth-clause text{
		margin: 0 10rpx;
		color: #ED6D0F;
	}
	.auth-foot {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		padding: 0 60rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
	
	.auth-foot .oauth {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		min-height: 160upx;
		justify-content: space-around;
	}
	
	.auth-foot .oauth view {
		border: 2rpx solid #FCF7E9;
	}
	
	.auth-foot .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 100rpx;
		color: #3f2f21;
		line-height: 28rpx;
		font-size: 28rpx;
	}
	
	.auth-foot text {
		width: 180rpx;
		text-align: center;
	
	}
	
	.auth-foot text:nth-child(2) {
		border-left: 1px solid #ececec;
	}
	/* 验证码 */
	.auth-title{
		padding-bottom: 30rpx;
		padding-top: 170rpx;
		font-size: 60rpx;
	}
	.auth-mobile{
		color: #9a9a9a;
		padding-bottom: 80rpx;
	}
	.auth-mobile text{
		margin-left: 10rpx;
	}
	
	
	
	
	
	
	.codes {
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		
	}
	.codes input {
		background: #ffffff;
		border-bottom: 1px solid #c3c3c3;
		width: 90upx;
		height: 90upx;
		text-align: center;
	}
	.codes .input {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		border-bottom: 1px solid #c3c3c3;
		width: 90upx;
		height: 90upx;
		font-size: 40upx;
		font-weight: 500;
		color: #333333;
	}
	.codes .input .shining {
		border: 1px solid #ED6D0F;
		height: 50upx;
		animation: shining 1s linear infinite;
		/* 其它浏览器兼容性前缀 */
		-webkit-animation: shining 1s linear infinite;
		-moz-animation: shining 1s linear infinite;
		-ms-animation: shining 1s linear infinite;
		-o-animation: shining 1s linear infinite;
	}
	.codes .active {
		border-bottom: 1px solid #ED6D0F;
		caret-color: #ED6D0F;
	}
	.oneline-codes input {
		text-align: center;
	}
	
	.auth-again{
		padding-top: 50rpx;
	}
	.auth-again text{
		color: #ED6D0F;
		margin-right: 40rpx;
	}
	.auth-again .time{
		color: #9a9a9a;
	}
	
	@-webkit-keyframes shining {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 1;
		}
		50.01% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	.wlIcon-QQ{
		color: #12b8f6;
	}
	.wlIcon-WeChat{
		color: #02dc6b;
	}
	.wlIcon-WeiBo{
		color: #d32820;
	}
	.wlIcon-Xiaomi{
		color: #ff6b00;
	}
</style>
